.mainlayout {
	&-area {
		display: flex;
		height: calc(100vh - 20px);
		.menu {
			width: var(--menu-width);
		}
		&>.content {
			width: calc(100% - var(--menu-width)) !important;
			// background: white;
			// border: 1px solid rgb(235, 235, 235);
			// -moz-box-shadow: -1px 0px 2px rgba(0, 0, 0, 0.0078431373);
			// -webkit-box-shadow: -1px 0px 2px rgba(0, 0, 0, 0.0078431373);
			// box-shadow: -1px 0px 2px rgba(0, 0, 0, 0.0078431373);
			border-radius: 6px;
			// padding: 0 10px;
			&-width{
				width: 100%;
			}
			#container{
				
				.layout-area{
					padding-right: 0;
				}
				.menu{
					display: none;
				}
				.content{
					width: 100%;
				}
			}
			&-bg{
				background: initial;
				border: none;
				padding: 0;
				box-shadow: initial;
				.content{
					background: initial;
				}
				&>#container{
					height: 100%;
					&>div{
						height: 100%;
					}
				}
			}
			&>.arco-spin{
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}
		}
		&-style{
			padding: 0;
		}
	}
	&.app{
		.content{
			background: initial;
		}
	}
    .applayout{
        .menu{
            display: none;
        }
    }
}
.menu {
	height: 100%;
	position: relative;
	padding: 0 15px;
	.logo {
		width: 120px;
		height: var(--header-height);
		margin: 0 auto;
		display: flex;
		align-items: center;
	}
	.bottom {
		position: absolute;
		bottom: 10px;
		left: 0;
		padding: 0 15px;
		width: 100%;
		&>span{
			border-radius: 6px;
		}
		.cursor{
			display: inline-block;
			padding: 10px;
			&:hover{
				background-color: #e6e6e6;
			}
		}
	}
	.menu-list,
	#common-menu{
		.out-setting{
			padding: 10px;
			cursor: pointer;
			border-radius: 6px;
			margin-top: 12px;
			&:hover{
				background-color: #e6e6e6;
			}
		}
		&>.item{
			padding: 0 10px;
			cursor: pointer;
			display: flex;
			align-items: center;
			line-height: 32px;
			&:not(:last-child){
				margin-bottom: 2px;
			}
			&:first-child{
				margin-bottom: 3px;
			}
			&-active{
				background: #e6e6e6;
				color: rgb(14, 66, 210) !important;
				border-radius: 6px;
			}
			&:hover{
				color: rgb(14, 66, 210) !important;
				border-radius: 6px;
				background: #e6e6e6;
			}
			svg{
				font-size: 19.5px !important;
			}
			.titles{
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				.unread{
					display: inline-block;
					padding: 0px 8px;
					background: #ed4014;
					color: white;
					border-radius: 10px;
					line-height: 16px;
				}
			}
		}
		.title{
			padding: 20px 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #B3B3B3;
		}
	}
	.app-list{
		.item{
			padding: 10px;
		}
	}
}

.user-info{
	background: white;
	border-radius: 4px;
	margin-bottom: 10px;
	.name{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 7px 10px;
		.names{
			margin-left: 10px;
		}
		.down{
			font-size: 14px;
			color: #999;
			margin: 3px -10px 0 0;
		}
	}
	.my-drawer{
		.el-drawer{
			width: 80% !important;
			overflow: initial !important;
			.el-drawer__close-btn{
				position: absolute;
				left: -35px;
				color: white;
				&:hover{
					padding: 5px 0;
					.el-icon{
						color: white;
					}
				}
			}
			.el-drawer__header{
				margin-bottom: 0;
			}
			.el-drawer__body{
				padding: 10px;
			}
		}
	}
}

.common-menu{
	padding-top: 5px;
}
#common-menu{
	.logo{
		display: none;
	}
	svg,
	.EachApp{
		color: #333;
	}
	.menu-list{
		padding: 0;
	}
	.item{
		&:hover{
			color: rgb(14, 66, 210) !important;
			svg,
			.EachApp{
				color: rgb(14, 66, 210) !important;
				border-radius: 6px;
				background: #e6e6e6;
			}
		}
		&-active{
			svg,
			.EachApp{
				color: rgb(14, 66, 210) !important;
			}
		}
	}
	.arco-menu{
		&-icon{
			margin-right: 10px;
		}
		&-inner{
			padding: 0;
		}
		&-selected{
			color: rgb(14, 66, 210) !important;
			svg,
			.EachApp{
				color: rgb(14, 66, 210) !important;
			}
		}
		&-item{
			font-weight: normal;
			&:hover{
				color: rgb(14, 66, 210) !important;
				svg,
				.EachApp{
					color: rgb(14, 66, 210) !important;
					border-radius: 6px;
					background: #e6e6e6;
				}
			}
		}
	}
}